<template>
    <div class="home">
        <!-- 轮播图 -->
        <!-- <swiper /> -->
        <!-- 外部容器 -->
        <div class="main-content">
            <!-- 主内容区域 -->
            <div class="section-container">
                <div class="wrapper-center">
                    <!-- 推荐文章 -->
                    <div
                        class="section"
                        v-for="(item, index) in articlesList"
                        :key="index"
                    >
                        <div
                            v-if="item.list != null && item.list.length !== 0"
                            class="section-title"
                        >
                            {{ item.name }}
                        </div>
                        <!-- 置顶文章 -->
                        <template
                            v-if="item.type === '1' && item.list.length !== 0"
                        >
                            <content-list
                                v-if="isMobileOrPc"
                                :contentList="item.list"
                            ></content-list>
                            <!-- pc端横向显示 -->
                            <pinned
                                class="pinned"
                                v-else
                                :contentList="item.list"
                            ></pinned>
                        </template>
                        <!-- 普通文章 -->
                        <content-list
                            v-else-if="
                                item.type === '2' && item.list.length !== 0
                            "
                            :contentList="item.list"
                        ></content-list>
                        <!-- 标签图 -->
                        <!-- <tag-image v-else-if="item.type == '3'" :contentList="item.list"/> -->
                        <!-- 标签列表 -->
                        <tag-box
                            v-else-if="
                                item.type === '3' && item.list.length !== 0
                            "
                            :contentList="item.list"
                        />
                        <!-- 菜单翻转 -->
                        <menu-image
                            v-else-if="
                                item.type === '4' && item.list.length !== 0
                            "
                            :contentList="item.list"
                        />
                    </div>
                </div>
            </div>
            <!-- 侧边栏 -->
            <div v-if="!isMobileOrPc" class="sidebar">
                <div style="position: sticky; top: 70px; height: 100vh">
                    <sidebar
                        :avatar-url="avatar"
                        :nickname="title"
                        bio="学习记录 & 编程笔记"
                    ></sidebar>
                    <ProgressBar />
                    <div class="sidebar-item-box">
                        <div
                            v-for="(item, index) in sidebarList"
                            :key="index"
                            class="sidebar-item"
                        >
                            <!-- 如果是广告类型 -->
                            <div v-if="item.type === '1'" class="ad-container">
                                <advert :src="item.pic" />
                            </div>
                            <!-- 如果是文章类型 -->
                            <div
                                v-else-if="item.type === '2'"
                                class="content-container"
                            >
                                <h3 class="title">{{ item.title }}</h3>
                                <sidebar-list
                                    :contentList="item.list"
                                ></sidebar-list>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import Swiper from "../components/Swiper"; // 轮播图
import ProgressBar from "../components/ProgressBar"; // 轮播图
import contentList from "../components/ContentList";
import sidebarList from "../components/SidebarList";
import tagImage from "../components/TagImage"; // 标签图
import menuImage from "../components/MenuImage"; // 图片菜单
import tagBox from "../components/TagBox"; // 标签列表
import pinned from "../components/Pinned"; // 置顶
import Sidebar from "../components/Sidebar"; // 置顶
import advert from "../components/Advert"; // 广告
import { getConfigList, getHomeList } from "../api/index";
import { isMobileOrPc } from "@/utils/utils";

export default {
    name: "home",
    components: {
        Swiper,
        contentList,
        tagImage,
        pinned,
        advert,
        sidebarList,
        tagBox,
        menuImage,
        Sidebar,
        ProgressBar,
    },
    data() {
        return {
            //   主页
            articlesList: [],
            // 侧边栏
            sidebarList: [
                // {
                //   type: '1', // 1广告， 2文章
                //   pic:
                //     'http://xhtlove.cn/fraud/files/article/20240306/3e1fad22c9a24fe69704ac6a0d7ec2e8bg280.jpg',
                // },
                {
                    type: "2", // 1广告， 2文章
                    title: "热门文章",
                    list: [
                        {
                            id: 4,
                            pic: "http://xhtlove.cn/fraud/files/article/20240306/9d31411645e844e9b8ae0d9a711f6ababg244.jpg",
                            name: "测试数据",
                            title: "测试标题",
                            content: "测试文章",
                        },
                        {
                            id: 6,
                            pic: "http://xhtlove.cn/fraud/files/article/20240306/bb708d42022c406bbb2aac96c5dbc0aebg255.jpg",
                            name: "测试数据",
                            title: "测试标题",
                            content: "测试文章",
                        },
                        {
                            id: 8,
                            pic: "http://xhtlove.cn/fraud/files/article/20240306/49c3b726c8474bcc878f60b5cbc9f5dcbg249.jpg",
                            name: "测试数据",
                            title: "测试标题",
                            content: "测试文章",
                        },
                    ],
                },
            ],
            isMobileOrPc: isMobileOrPc(),
            avatar: "",
            title: "",
        };
    },
    created() {
        this.getArticleList();
        this.initConfig();
    },
    methods: {
        getArticleList() {
            // 获取前十条文章
            getHomeList()
                .then((res) => {
                    console.log(res);
                    this.articlesList = res.data;
                })
                .catch((err) => {
                    console.log(err);
                });
        },
        initConfig() {
            getConfigList(["WEBSITE_AVATAR", "WEBSITE_TITLE_EN"])
                .then((res) => {
                    let _data = res.data;
                    this.avatar = _data.WEBSITE_AVATAR;
                    this.title = _data.WEBSITE_TITLE_EN;
                })
                .catch((err) => {
                    console.log(err);
                });
        },
    },
};
</script>

<style lang="scss" scoped>
@use "../assets/css/home.scss";
</style>
